<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./ag.css">
    <link rel="stylesheet" href="font\css\all.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div class="topnav">
        <div class="navleft">
            &nbsp&nbsp小伙伴，欢迎来到我们的解忧！
        </div>
        <div class="navright">
            <ul>
                <li>
                    <a  class="book"href="./分页/text.css">推荐书籍和灵感</a>
                    <div class="page1">
                    <a href="./index.html">推荐书籍</a>
                    <a href="./inspiration.html">灵感</a>
                </div></li>
                <li>
                    <a href="./cave.html">树洞</a></li>
                <li>
                    <a href="./register.html">注册和登录</a></li>
            </ul>
        </div>
    </div>
    <div class="zhong">
        <div class="cube">
            <div class="box1">
            <img src="./img/1.jpg" alt="">
            </div>
            <div class="box2">
                <img src="./img/2.jpg" alt="">
            </div>
            <div class="box3">
                <img src="./img/3.jpg" alt="">
                </div>
                <div class="box4">
                    <img src="./img/4.jpg" alt="">
                </div>
                <div class="box5">
                    <img src="./img/5.jpg" alt="">
                    </div>
                    <div class="box6">
                        <img src="./img/6.jpg" alt="">
                    </div> 
        </div>
        <div class="search-wrapper">
            <form class="search"action="#">
                <input class="search-inp"type="text"placeholder="搜索你想搜索的">
                <button class="search-btn">
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
        <div class="zhongpage">
            愿每天，你都是更好的自己

        </div>
    </div>
    <div class="three"> 
        <div class="clear-fix">
        <ul class="leftnav">
            <li><a href="">灵感来源&nbsp&nbsp&nbsp&nbsp</a><i class="iconfont">&#xe615;</i>
                <div class="hd1"><img src="./img/jy(2).jpg" alt=""><p>这个时代很好，又很快。我们在钢筋混凝土构成的众林生
        存，但有时候因为节奏太快，让自己压力太大。我们想找一个地方倾诉，并有人回复。正如东野圭吾
书中的解忧杂货店。故以此命名，以学校为单位希望能让小伙伴们在此可以匿
                    名的去尽情表达自己。
            </p> 
            </div></li>
            <li><a href="">本日推荐&nbsp&nbsp&nbsp&nbsp</a><i class="iconfont">&#xe615;</i><div class="hd2">
                <img src="./img/book3(2).jpg" alt=""><p>有朵盛开的云，缓缓滑过山顶，随风飘向天边。我们慢慢明白，有些告别，就是最后一面。
                    麦穗托着夕阳，晚风卷着一串一串细碎的光，叶子片片转身，翻起了黄昏。
                    在大多数人心中，自己的故乡后来会成为一个点，如同亘古不变的孤岛。
                    什么叫故乡，祖祖辈辈埋葬在这里，所以叫故乡。
                    
                    </p></div></li>
            <li><a href="">本周推荐&nbsp&nbsp&nbsp&nbsp</a><i class="iconfont">&#xe615;</i><div class="hd3">
                <img src="./img/book1(2).jpg" alt=""><p>有迷茫，承认它，接纳它，再克服它，才是这一路上我们结伴同行的意义。
                    把时光当阳光，把痛苦当鼓舞。
                    苦等的幸福，就在于对方的一句“我没事”。难得的闲情，便是这个年代的奢侈方式。今天永远对明天充满幻想，才有坚定的信念活到后天。
                    </p></div></li>
            <li><a href="">新文速推&nbsp&nbsp&nbsp&nbsp</a><i class="iconfont">&#xe615;</i><div class="hd4">
                <img src="./img/book2(2).jpg" alt=""><p>这本书讲述的是丈夫因病去世后，在痛失挚爱的阴霾里，她带着儿子重获新生的生活经历。面对爱人的离去，她依旧热爱这个世界，用爱去点亮自己和孩子的一生。

                    </p></div></li>
            <li class="k1">
            </li>
        </ul>
       </div>
       <div class="outer">
        <ul id="imglist">
            <li>
            
              <img src="./img/book1(1).jpg" alt=""  style="width: 302px;height: 406px;"></li>
            <li>
              
              <img src="./img/book2(1).jpg" alt=""  style="width: 302px;height: 406px;">
            </li>
            <li>
           <img src="./img/book3(1).jpg" alt=""  style="width: 302px;height: 406px;"></li>
           <li><img src="./img/book4(1).jpg" alt="" style="width: 302px;height: 406px;"></li>
          </ul>
          <div class="btn">
            <p class="next">&lt;</p>
           <p class="prev">&gt;</p>
          </div>
        </div>
       <div class="sart">
        <div class="fl"><a href="">心理类</a></div>
        <div class="fl"><a href="">轻小说</a></div>
        <div class="fl"><a href="">现实</a></div>
        <div class="fl"><a href="">奇幻</a></div>
        <div class="fl"><a href="">都市</a></div>
        <div class="fl"><a href="">悬疑</a></div>
        
       </div>
      </div>
      <div class="container">
        <div id="slide">
           <div class="item active" style="background-image: url(./img/book1\(1\).jpg); ">
              <div class="content">
                   <div class="name">谁的青春不迷茫</div>
                   <div class="author">刘同</div>
                   <button> <a href="">see more</a></button>
             </div>
          </div>
          <div class="item" style="background-image: url(./img/book2\(1\).jpg);">
              <div class="content">
                   <div class="name">星空邮局</div>
                   <div class="author">金鱼酱</div>
                   <button> <a href="">see more</a></button>
             </div>
          </div>
          <div class="item" style="background-image: url(./img/book3\(1\).jpg);">
              <div class="content">
                   <div class="name">云边有个小卖部</div>
                   <div class="author">张嘉佳</div>
                   <button> <a href="">see more</a></button>
             </div>
          </div>
          <div class="item" style="background-image: url(./img/book4\(1\).jpg);">
              <div class="content">
                   <div class="name">解忧杂货店</div>
                   <div class="author">东野圭吾</div>
                   <button> <a href="">see more</a></button>>
             </div>
          </div>
        
      </div>
      <div class="buttons">
          <div class="button">&lt;</div>
          <div class="button">&gt;</div>
      </div>
      </div>
<div class="footer">
  <div id="footer">
    <li class="img1">
        <img class="iii"src="./img/book1(1).jpg" alt="">
        <h1 style="font-size: 16px;">谁的青春不迷茫 </h1>
       <h2 style="font-size: 12px;">刘同</h2>
       <p>&nbsp&nbsp摘抄：
        谁的青春不迷茫，其实我们都一样。
        很多人闯进你的生命里，只是为你上一课，然后匆匆转身就走。
        时间不过是围墙上斑驳的阴影，因为日照而改变形状，最终，你依然是你。
        其中，我也很喜欢这句话“读书不是为了证明自己，读书只是取悦自己”。</p>
        <a href>。。。</a>
    </li>
    <li class="img2"><img class="iii2"src="./img/book2(1).jpg" alt="">
        <h1 style="font-size: 16px;">星空邮局 </h1>
       <h2 style="font-size: 12px;">金鱼酱</h2>
       <p>摘抄：
        一个人不管经历什么，人生的每个时期都应该有独立的勇气，都应该好好地去面对、去珍惜。
    大致介绍一下这本书：
     这本书讲述的是丈夫因病去世后，在痛失挚爱的阴霾里，她带着儿子重获新生的生活经历。面对爱人的离去，她依旧热爱这个世界，用爱去点亮自己和孩子的一生。</p>
    </li> 
    <li class="img3"><img class="iii3"src="./img/book3(1).jpg" alt="">
        <h1 style="font-size: 16px;">云边有个小卖部  </h1>
    <h2 style="font-size: 12px;">
    </h2>
    <p>摘抄：
        书摘
        有朵盛开的云，缓缓滑过山顶，随风飘向天边。我们慢慢明白，有些告别，就是最后一面。
        麦穗托着夕阳，晚风卷着一串一串细碎的光，叶子片片转身，翻起了黄昏。
        在大多数人心中，自己的故乡后来会成为一个点，如同亘古不变的孤岛。
        什么叫故乡，祖祖辈辈埋葬在这里，所以叫故乡。
        这世上大部分抒情，都会被认作无病呻吟。能理解你得了什么病，基本就是知己。。</p>
     <a href>。。。</a></li>
  </div>
  <div class="js">
    <div class="xjs">
        <a href="">see more</a>
       
    </div>
  <div class="xjs"><a href="">see more</a></div>
  <div class="xjs"><a href="">see more</a></div></div>
   <div class="end">
    <div class="k1">以上资料皆引用于网上，如有侵权，请联系作者删除
    </div>
    <div class="k2">我们想给你一个你所熟悉的平台——学校去悄悄说自己的烦恼，被人知道，又因为自己是匿名没担忧
    </div>
   </div>
</div>
   <script>
  var k=document.querySelector('.prev');
        var h=document.querySelector('.next');
        var img=document.getElementsByTagName("img")[13];
        var imgArr=["./img/book1(1).jpg","./img/book2(1).jpg","./img/book3(1).jpg"];
        var imglist=document.getElementById("imglist");
       var fk=document.getElementById("fk");
        var index=0;
    binding(k,"click",prev);

   binding(h,"click",next);
    var timer = setInterval(next, 3000);
binding(k,"click",prev);
binding(k,"mouseover",function(){
    clearInterval(timer);
  timer = null;
});
binding(k,"mouseout",function(){
    timer = setInterval(next, 3000);
})
binding(h,"click",next);
binding(h,"mouseover",function(){
    clearInterval(timer);
  timer = null;
});

binding(h,"mouseout",function(){
    timer = setInterval(next, 3000);
})

        function next(){
            index++;
        if(index>imgArr.length-1){
            index=0;
        }
        img.src=imgArr[index];
    }
        function prev(){
            index--;
        if(index<0){
            index=imgArr.length-1;
        }
        img.src=imgArr[index];
    }
     var m= document.querySelectorAll('.button')[1];
    var n= document.querySelectorAll('.button')[0];
    binding(m,"click",function(){
        var lists=document.querySelectorAll('.item');
        var k=document.querySelector('#slide');
        k.appendChild(lists[0]);
    });
    binding(n,"click",function(){
        var lists=document.querySelectorAll('.item');
        var k=document.querySelector('#slide');
        k.prepend(lists[lists.length-1]);
    });
function binding(object,eventstring,callback){
    if(object.addEventListener){
object.addEventListener(eventstring,callback,false);
    }else{
object.attachEvent("on"+eventstring,callback);
    }
}
   </script>
</body>
</html>